$(function () {
    // 基于准备好的dom，初始化echarts实例
    var mylineNumChart = echarts.init(document.getElementById('bookLineNum'));
    // 指定图表的配置项和数据
    var mylineNumoption = {
        title: {
            text: '预订房间统计', //标题文本内容
            x:'center'
        },
        toolbox: { //可视化的工具箱
            show: true,
            feature: {
                dataView: { //数据视图
                    show: true
                },
               /* restore: { //重置
                    show: true
                },*/
            /*    dataZoom: { //数据缩放视图
                    show: true
                },*/
                saveAsImage: {//保存图片
                    show: true
                },
                magicType: {//动态类型切换
                    type: ['bar', 'line']
                }
            }
        },
        tooltip: { //弹窗组件
            show: true
        },
        xAxis: {
            data: ['大床房预定数', '双人房预定数', '商务房预定数', '情侣房预定数']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]

    };

    // 使用刚指定的配置项和数据显示图表。
    mylineNumChart.setOption(mylineNumoption);

    // 基于准备好的dom，初始化echarts实例
    var mylinePriceChart = echarts.init(document.getElementById('bookLinePrice'));
    // 指定图表的配置项和数据
    var mylinePriceoption = {
        title: {
            text: '预订价格统计', //标题文本内容
            x:'center'
        },
        toolbox: { //可视化的工具箱
            show: true,
            feature: {
                dataView: { //数据视图
                    show: true
                },
                /*restore: { //重置
                    show: true
                },*/
                /*    dataZoom: { //数据缩放视图
                        show: true
                    },*/
                saveAsImage: {//保存图片
                    show: true
                },
                magicType: {//动态类型切换
                    type: ['bar', 'line']
                }
            }
        },
        tooltip: { //弹窗组件
            show: true
        },
        xAxis: {
            data: ['低于199', '200-500', '501-1000', '高于1000']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]

    };

    // 使用刚指定的配置项和数据显示图表。
    mylinePriceChart.setOption(mylinePriceoption);


    //饼图数量模板
    var dom = document.getElementById("bookNum");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
            textStyle: {
                fontSize: '16px',
                color: '#000'  // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data: ['大床房预定数', '双人房预定数', '商务房预定数', '情侣房预定数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                /*动态类型切换*/
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '30%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                /*/!*刷新*!/
                restore : {show: true},*/
                /*保存图片*/
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series: [{
            name: '',
            type: 'pie',
            radius: ['0', '70%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            //直径占整个div高度的多少
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: { //强调样式
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    //饼图数量动态赋值
    $.ajax({
        type: "post",
        url: ctx+"adminHigh/echartBing",
        cache : false,    //禁用缓存
        dataType: "json",
        success: function(data) {
            var names=[];//定义两个数组
            names.push(data.bigNum);
            names.push(data.douNum);
            names.push(data.cirNum);
            names.push(data.couNum);
            console.info("数量names"+names.toString())
            myChart.setOption({ //加载数据图表
            series: {
                // 根据名字对应到相应的系列
                data:[
                    {value:names[0] , name: '大床房预定数'},
                    {value:names[1], name: '双人房预定数'},
                    {value:names[2] ,name: '商务房预定数'},
                    {value:names[3], name: '情侣房预定数'}
                ]

            }
            });
            mylineNumChart.setOption({        //加载数据图表
                series: [{
                    data: names
                }]
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("查询失败");
        }
    });

    //饼图价格模板
    var dom1 = document.getElementById("bookPrice");
    var myChart1 = echarts.init(dom1);
    var app = {};
    option1 = null;
    option1 = {
        /*标题设置*/
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        /*提示框设置*/
        tooltip : {
            trigger: 'item',
            backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
            textStyle: {
                fontSize: '16px',
                color: '#000'  // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        /*图例设置*/
        legend: {
            orient : 'vertical',
            x : 'left',
            data: ['低于199', '200-500', '501-1000', '高于1000']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                /*数据视图*/
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                /*/!*刷新*!/
                restore : {show: true},*/
                /*保存图片*/
                saveAsImage : {show: true}
            }
        },
        /*图标计算*/
        calculable : true,
        series: [{
            name: '',
            type: 'pie',
            radius: ['0', '70%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            avoidLabelOverlap: false,
            // 设置值域的标签
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
        }]
    };
    ;
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
    //饼图价格动态赋值
    $.ajax({
        type: "post",
        url: ctx +"adminHigh/echartBingPrice",
        cache : false,    //禁用缓存
        dataType: "json",
        success: function(data) {
            var names=[];//定义两个数组
            names.push(data.bigPrice);
            names.push(data.douPrice);
            names.push(data.cirPrice);
            names.push(data.couPrice);
            console.info("价格names"+names.toString())
            myChart1.setOption({ //加载数据图表
                series: {
                    // 根据名字对应到相应的系列
                    data:[
                        {value:names[0] , name: '低于199'},
                        {value:names[1] , name: '200-500'},
                        {value:names[2] , name: '501-1000'},
                        {value:names[3] , name: '高于1000'}
                    ]

                }
            });
            mylinePriceChart.setOption({        //加载数据图表
                series: [{
                    data: names
                }]
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("查询失败");
        }
    });
})

